$base: #2f77e3;  //定义主色
$font-deep:#333; //深灰色，一般用于加深字体颜色
$font-normal:#666; //中等灰色，一般用于正常字体颜色
$font-easy:#999; //浅灰色，一般用于浅色字体颜色
$border-normal:#e2e2e2; //正常边框颜色
$bg-color-base:#efeff4; //背景色
$bg-color-blue:#e6f2ff; //浅蓝背景色
$orange:#ff8317; //橘色
$radius-base:4px;  //定义基础角度
$green:#4cd964;
body{
  background-color: $bg-color-base;
}
.hasNav{
  padding-bottom: 1rem;
}
.fl{
  float: left;
  display: block;
}
.fr{
  float: right;
  display: block;
}
.indent{
  display: inline-block;
  width: 2em;
}
.no-border{
  border: none !important;
}
/*定义栅格化*/
@for $i from 1 through 12 {
  .col-#{$i} { width: (100%/12) * $i;@extend .fl;}
}
.flex-box{
  display:-webkit-box;
  display:-moz-box;
  display:box;
  display:-ms-box;
}
@for $j from 1 through 10{
  .flex-#{$j}{box-flex:$j;-webkit-box-flex:$j;-moz-box-flex:$j;-ms-box-flex:$j;}
}
.tc{text-align:center;}
.font-normal{color:$font-normal;}
.font-easy{color:$font-easy;}
.font-deep{color:$font-deep;}

/* 定义5px-50px的字体大小 */
@for $k from 5 through 50{
  .font-#{$k}{font-size:$k*1px;}
}
.color-white{color:#fff;}
.color-blue{color:$base;}
.mg-t-def{margin-top:10px;}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;height:0;}
.bg-color-white{background-color:#fff;}
.bg-color-orange{background-color:$orange;}
.bg-color-green{background-color:$green;}
.bg-color-blue{background-color:$base;}
.box{display:block;background-color:#fff;}
.box-first{margin-top:10px;}
